<!DOCTYPE html>
<html>
<body>
<canvas id="physics_diagram" width="500" height="350"></canvas>
<script>
    const canvas = document.getElementById('physics_diagram');
    const ctx = canvas.getContext('2d');

    // Parameters based on the image's relative proportions
    const a = 60; // Radius of the loop in pixels
    const centerX = 250;
    const loopCenterY = 110;
    const wireY = loopCenterY + 2 * a;

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    // Use Times New Roman for a closer match to the serif font in the image
    const italicFont = 'italic 20px Times New Roman';
    const regularFont = '20px Times New Roman';

    // 1. Draw the long straight wire
    ctx.beginPath();
    ctx.moveTo(30, wireY);
    ctx.lineTo(470, wireY);
    ctx.stroke();

    // 2. Draw the current arrow on the wire
    // Position the arrow to the left of the center, as in the image
    const arrowOnLineX = centerX - 120;
    ctx.beginPath();
    ctx.moveTo(arrowOnLineX + 8, wireY); // Tip of the arrow
    ctx.lineTo(arrowOnLineX, wireY - 4);  // Upper part of arrowhead
    ctx.moveTo(arrowOnLineX + 8, wireY);
    ctx.lineTo(arrowOnLineX, wireY + 4);  // Lower part of arrowhead
    ctx.stroke();

    // 3. Draw the current label "I(t)" below the wire
    ctx.font = italicFont;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('I(t)', arrowOnLineX, wireY + 25);

    // 4. Draw the circular loop
    ctx.beginPath();
    ctx.arc(centerX, loopCenterY, a, 0, 2 * Math.PI);
    ctx.stroke();

    // 5. Draw the radius 'a'
    // The image shows the radius pointing up and to the left (135 degrees from positive x-axis)
    const radiusAngle = 3 * Math.PI / 4;
    const startX_r = centerX;
    const startY_r = loopCenterY;
    // In canvas coordinates, y increases downwards, so we subtract the y-component
    const endX_r = startX_r + a * Math.cos(radiusAngle);
    const endY_r = startY_r - a * Math.sin(radiusAngle);
    
    // Draw the radius line
    ctx.beginPath();
    ctx.moveTo(startX_r, startY_r);
    ctx.lineTo(endX_r, endY_r);
    ctx.stroke();
    
    // Draw the arrowhead for the radius
    const angle_r = Math.atan2(endY_r - startY_r, endX_r - startX_r);
    const headlen_r = 10;
    ctx.beginPath();
    ctx.moveTo(endX_r, endY_r);
    ctx.lineTo(endX_r - headlen_r * Math.cos(angle_r - Math.PI / 7), endY_r - headlen_r * Math.sin(angle_r - Math.PI / 7));
    ctx.moveTo(endX_r, endY_r);
    ctx.lineTo(endX_r - headlen_r * Math.cos(angle_r + Math.PI / 7), endY_r - headlen_r * Math.sin(angle_r + Math.PI / 7));
    ctx.stroke();
    
    // 6. Draw the label 'a' for the radius
    ctx.font = italicFont;
    ctx.fillText('a', startX_r + (endX_r - startX_r) / 2, startY_r + (endY_r - startY_r) / 2 - 12);

    // 7. Draw the distance measurement lines
    const distLineX = centerX + 1.3 * a;

    // Dashed horizontal line from the center to the vertical measure line
    ctx.beginPath();
    ctx.setLineDash([4, 4]);
    ctx.moveTo(centerX, loopCenterY);
    ctx.lineTo(distLineX, loopCenterY);
    ctx.stroke();

    // Solid vertical line for the distance
    ctx.setLineDash([]); // Reset to solid line
    ctx.beginPath();
    ctx.moveTo(distLineX, loopCenterY);
    ctx.lineTo(distLineX, wireY);
    ctx.stroke();

    // Arrowheads for the vertical distance line
    const arrowSize = 6;
    // Top arrowhead (points up)
    ctx.beginPath();
    ctx.moveTo(distLineX, loopCenterY);
    ctx.lineTo(distLineX - arrowSize, loopCenterY + arrowSize);
    ctx.moveTo(distLineX, loopCenterY);
    ctx.lineTo(distLineX + arrowSize, loopCenterY + arrowSize);
    ctx.stroke();
    // Bottom arrowhead (points down)
    ctx.beginPath();
    ctx.moveTo(distLineX, wireY);
    ctx.lineTo(distLineX - arrowSize, wireY - arrowSize);
    ctx.moveTo(distLineX, wireY);
    ctx.lineTo(distLineX + arrowSize, wireY - arrowSize);
    ctx.stroke();

    // 8. Draw the label '2a' for the distance
    ctx.font = regularFont;
    ctx.textAlign = 'left';
    ctx.fillText('2a', distLineX + 8, (loopCenterY + wireY) / 2);

</script>
</body>
</html>